<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @property --pointerColor {
        syntax: "<color>";
        inherits: false;
        initial-value: #000;
      }

      body,
      html {
        width: 100%;
        height: 100%;
        display: flex;
        background: #fff;
      }

      div {
        position: relative;
        display: inline;
        margin: auto;
        width: max(500px, 40vw);
        font-size: 26px;
        line-height: 1.25;
      }

      p {
        padding: 4px 8px;
        border: 1px solid #000;
        display: inline-block;
      }

      a {
        background: linear-gradient(
          90deg,
          transparent,
          transparent calc(100% - 2px),
          var(--pointerColor) calc(100% - 2px),
          var(--pointerColor)
        );
        background-size: 100% 70%;
        background-position: 0 5px;
        background-repeat: no-repeat;
        animation: colorChange 0.8s linear infinite;
        padding-right: 4px;
      }

      @keyframes colorChange {
        0%,
        40% {
          --pointerColor: #000;
        }
        60%,
        100% {
          --pointerColor: transparent;
        }
      }
    </style>
  </head>
  <body>
    <div>
      <p>
        <a id="content"></a>
      </p>
      <button onclick="readInfo()">继续加载</button>
    </div>
    <script>
      const text =
        "现代汉语有标准语和方言之分。普通话是现代汉语的标准语，以北京语音为标准音、以北方话为基础方言、以典范的现代白话文著作为语法规范。《中华人民共和国宪法》规定：“国家推广全国通用的普通话。”2000年10月31日颁布的《中华人民共和国国家通用语言文字法》确定普通话为国家通用语言。汉语方言通常分为十大方言：官话方言、晋方言、吴方言、闽方言、客家方言、粤方言、湘方言、赣方言、徽方言、平话土话。";

      const contentElement = document.getElementById("content");

      function readInfo() {
        let index = 0;
        contentElement.textContent = "";

        function addNextCharacter() {
          if (index < text.length) {
            contentElement.style.background = "";
            console.log(1111111);
            contentElement.textContent += text[index];
            index++;
            setTimeout(addNextCharacter, Math.random() * 150 + 30);
          } else {
            console.log(22222);
            contentElement.style.background = "transparent";
          }
        }

        addNextCharacter();
      }
    </script>
  </body>
</html>
